<script lang="ts" setup>
import { House, ArrowRight, Refresh, SemiSelect } from "@element-plus/icons-vue"
import { reactive, ref } from 'vue'
import createAxios from "../request";
import { clock } from "../model/index";
import { onMounted } from "vue";
import userStore from '../store/UserStore';
import { ElMessage } from "element-plus";
let store = userStore();
let axios = createAxios();
let s = store.getDeptno
let list1: Array<clock> = [];

let tableData = reactive({
  "list": list1,
  "deptno": s,
  "currentPage": 1,
  "pageSize": 20,
  "total": 0
});

let selectedRows = ref<any[]>([]);

onMounted(() => {
  axios({
    url: "/selectCount",
    method: "POST",
    data: {
      deptno: tableData.deptno
    }
  }).then((res) => {
    //请求成功
    tableData.total = res.data;
  }).catch((err) => {
    //请求失败·
    ElMessage.error("请求失败")
    console.log(err);
  })
  getData();
});



const handleSelectionChange = (val: any[]) => {
  selectedRows.value = val;
};

const batchAgree = function () {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请选择要同意的考勤记录");
    return;
  }

  let ids: Array<number> = selectedRows.value.map(row => row.attend_id);
  axios({
    url: "/agreeAttendance",
    method: "POST",
    data: {
      ids: ids
    }
  }).then((res) => {
    // 请求成功
    ElMessage.success(`已同意${res.data}条补签申请`);
    getData(); // 刷新表格数据
  }).catch((err) => {
    // 请求失败
    ElMessage.error("请求失败");
    console.log(err);
  });
};

const batchRefuse = function () {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请选择要驳回的考勤记录");
    return;
  }

  let ids: Array<number> = selectedRows.value.map(row => row.attend_id);
  axios({
    url: "/refuseAttendance",
    method: "POST",
    data: {
      ids: ids
    }
  }).then((res) => {
    // 请求成功
    ElMessage.warning(`已驳回${res.data}条补签申请`);
    getData(); // 刷新表格数据
  }).catch((err) => {
    // 请求失败
    ElMessage.error("请求失败");
    console.log(err);
  });
};

const getData = function () {
  axios({
    url: "/selectAllEmpReattendance",
    method: "POST",
    data: {
      deptno: tableData.deptno,
      currentPage: tableData.currentPage,
      pageSize: tableData.pageSize
    }
  }).then((res) => {
    //请求成功
    tableData.list = res.data;
  }).catch((err) => {
    //请求失败·
    ElMessage.error("请求失败")
    console.log(err);
  })
}

let gotoFirst = function () {
  tableData.currentPage = 1;
  getData();
}

const agree = function (id: number) {
  let ids: Array<number> = [];
  ids.push(id);
  axios({
    url: "/agreeAttendance",
    method: "POST",
    data: {
      ids: ids
    }
  }).then((res) => {
    // 请求成功
    ElMessage.success(`已同意${res.data}条补签申请`);
    // 假设 res.data 是单个对象，需要包装成数组
    if (!Array.isArray(res.data)) {
      res.data = [res.data];
    }
    tableData.list = res.data;
    console.log(tableData.list);
    getData(); // 刷新表格数据
  }).catch((err) => {
    // 请求失败
    ElMessage.error("请求失败");
    console.log(err);
  });
}
let refuse = function (id: number) {
  let ids: Array<number> = [];
  ids.push(id);
  axios({
    url: "/refuseAttendance",
    method: "POST",
    data: {
      ids: ids
    }
  }).then((res) => {
    // 请求成功
    ElMessage.warning(`已驳回${res.data}条补签申请`);
    // 假设 res.data 是单个对象，需要包装成数组
    if (!Array.isArray(res.data)) {
      res.data = [res.data];
    }
    tableData.list = res.data;
    console.log(tableData.list);
    getData(); // 刷新表格数据
  }).catch((err) => {
    // 请求失败
    ElMessage.error("请求失败");
    console.log(err);
  });
}
const handlePageChange = (val: any) => {
  tableData.currentPage = val;
  getData();
}

</script>

<template>
  <el-container id="mainView">
    <el-header style="background-color: #272822; color: #E5E5E5; line-height: 60px; font-size: 27px;">审批考勤补签</el-header>
    <el-footer
      style="height: 30px; line-height: 30px; background-color: #4E5246; border-bottom:1px solid #7A7A7A; border-top:1px solid #7A7A7A;">
      <el-breadcrumb :separator-icon="ArrowRight" style="line-height: 30px;">
        <el-breadcrumb-item :to="{ path: '/home/homepage' }"><el-icon>
            <House />
          </el-icon>首页</el-breadcrumb-item>
        <el-breadcrumb-item>时间管理</el-breadcrumb-item>
        <el-breadcrumb-item>审批考勤补签</el-breadcrumb-item>
      </el-breadcrumb>
    </el-footer>
    <el-main style="padding-bottom: 0%;">
      <div style="padding-bottom: 5px;">
        <el-button type="success" color="#478A24" @click="batchAgree" style="margin-bottom: 5px"><el-icon>
            <Refresh />
          </el-icon>&nbsp;批量同意</el-button>
        <el-button type="danger" color="#B40B42" @click="batchRefuse" style="margin-bottom: 5px"><el-icon>
            <SemiSelect />
          </el-icon>&nbsp;批量驳回</el-button>
      </div>
      <div class="table">
        <el-table :data="tableData.list" border style="width: 96vw;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="attend_id" label="考勤编号" width="100px" />
          <el-table-column prop="date" label="日期" width="100px" />
          <el-table-column prop="ename" label="姓名" width="100px" />
          <el-table-column prop="clockIn_time" label="上班时间" width="100px" />
          <el-table-column prop="clockOut_time" label="下班时间" width="100px" />
          <el-table-column prop="reattend_reason" label="异常原因" width="100px" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="agree(scope.row.attend_id)" type="success" color="#478A24">
                <el-icon>
                  <Refresh />
                </el-icon>&nbsp;同意
              </el-button>
              <el-button @click="refuse(scope.row.attend_id)" type="danger" color="#B40B42">
                <el-icon>
                  <SemiSelect />
                </el-icon>&nbsp;驳回
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="display: flex; justify-content: flex-end;">
        <el-button color="#262727" @click="gotoFirst">首页</el-button>&nbsp;&nbsp;
        <el-pagination @current-change="handlePageChange" background layout="prev, pager, next" :total="tableData.total"
          style="text-align: right;" current-page="tableData.currentPage" :page-size="tableData.pageSize" />&nbsp;&nbsp;
      </div>
    </el-main>
  </el-container>
</template>

<style scoped>
#mainView {
  height: 100%;
  width: 100%;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.table {
  display: flex;
  justify-content: center;
}

.example-basic .el-date-editor {
  margin: 8px;
}
</style>